<template>
  <div class="totalContainer">
    <topHeader isFixed>
      <headJump title="值得买"></headJump>
    </topHeader>
    <div class="pay" style="height: 100%; background-color: #eee">
      <!-- <div
        class="row"
        style="
          position: fixed;
          top: 0;
          box-sizing: border-box;
          width: 100%;
          z-index: 1000;
        "
      >
        <van-icon name="wap-home-o"  @click="toIndex"/>
        <div class="pay_z">{{ title }}</div>
        <div class="icon" style="position: relative; margin-right: 0.2rem">
          <van-icon name="search"  @click="toSearch"/>
          <van-icon
            name="shopping-cart-o"
            style="margin-left: 0.3rem; margin-right: 0.07rem"
            @click="toCart"
          />
        </div>
      </div> -->
      <!-- 标题和轮播图 -->
      <div class="middleContainer">
        <!-- 标题 -->
        <div class="m-text">
          <img src="./imges/topic_logo.c2284970.png" />
          <div class="text1">严选好物 用心生活</div>
        </div>
        <!-- 轮播图 -->
          <van-swipe
          class="m-swipe"
          :loop="false"
          :width="90"
          indicator-color="red"
        >
          <van-swipe-item v-for="(nav, index) in navList" :key="index">
            <div class="itmelist" v-for="(item, index) in nav" :key="index">
              <img :src="item.picUrl" />
              <div class="text1">{{ item.mainTitle }}</div>
              <div class="text2">{{ item.viceTitle }}</div>
            </div>
          </van-swipe-item>
        </van-swipe>
    </div>
     </div>
    <!-- 瀑布流内容区 -->
    <div class="waterfallflowContainer">
      <div class="waterfallContainer">
        <!-- 加载效果 -->
        <van-loading
          size="40px"
          color="#1989fa"
          vertical
          v-if="!waterfallList.length"
          >更多内容正在加载中...</van-loading
        >
        <waterfall
          :col="col"
          :width="172"
          :gutterWidth="10"
          :data="waterfallList"
          @loadmore="loadmore"
          :lazyDistance="200"
          v-else
        >
          <template>
            <!-- 整个容器的数据 图片-->
            <div
              class="cell-item"
              v-for="(item, index) in waterfallList"
              :key="index"
              style="background-color: #fff"
            >
              <!-- 图片懒加载 -->
              <img v-if="item.img" :src="item.img" alt="加载错误" />
              <!-- 文字描述部分 -->
              <div class="t-text">
                <!-- 主题 -->
                <div class="title">{{ item.title }}</div>

                <div class="content">
                  <div class="start">
                    <div
                      class="avatar"
                      :style="{ backgroundImage: `url(${item.avatar})` }"
                    ></div>
                    <span class="name">{{ item.user }}</span>
                  </div>
                  <div class="icon">
                    <van-icon
                      name="eye-o"
                      size="15"
                      style="vertical-align: text-top"
                    />

                    <div class="sum">{{ numfix(item.look) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </waterfall>
      </div>
    </div>
  </div>
</template>

<script>


import {  reqWaterfallFlow ,reqShufflinfigure } from '@/axios/index'
export default {
  name: 'worthShop',
  data() {
    return {
      navList: [], //放轮播图数据
      waterfallList: [],// 瀑布流的数据
      col: 2,//列数
      page: 1,
      title:'值得买'
    }
  },
  methods: {
    // 跳转首页
    toIndex() {
      this.$router.push('/index')
    },
    // 跳转搜索
    toSearch(){
      this.$router.push('/search')
    },
    toCart(){
      this.$router.push('/cart')
    },
    // 转化数字
    numfix(num) {
      if (num / 10000 >= 1) {
        return num / 10000 >= 1
          ? (num / 10000).toFixed(2) + 'K'
          : num / 1000 >= 1? (num / 1000).toFixed(2) + 'W': num
      }
      return num
    },
    //滚动到底部触发
    loadmore() {
      this.page += 1
      this.getWaterfallInfo('agian')
      
    
    },

    // 获取瀑布流数据
    async getWaterfallInfo(type) {
      let res = await reqWaterfallFlow (this.page)
      if (!res.code === 200) {
        this.$toast.fail('请求失败查看接口')
        return
      }
      if(res.data.result.length===0) return //如果返回值没回来 
      // 请求回来的数据数据
      const waterfallArr = this.handleData(res.data.result)
      if (type === 'init') {
        // 重置数据
        this.waterfallList = waterfallArr
      
      }else if(type==='agian'){
      
        this.waterfallList = this.waterfallList.concat(waterfallArr)
     
      }
     
    },
    // 获取流轮播图数据
    async getShuffliFigure(){
      const result = await reqShufflinfigure()
      let arr = []
      for (var i = 0, length= result.data.navList.length; i < length; i += 2) {
        arr.push(result.data.navList.slice(i, i + 2))
      }
      this.navList = arr
    },
 
    // 处理瀑布流数据
    handleData(data) {
      let topics = []
      data.map((item) => {
        item.topics.forEach((item) => {
          topics.push(item)
        })
      })
      // 筛选形成新的数据
      var waterfallList = topics.map((item) => {
        let newlist = {}
        newlist.img = item.picUrl
        newlist.avatar = item.avatar
        newlist.title = item.title
        newlist.user = item.nickname
        newlist.look = item.readCount
        return newlist
      })
      return waterfallList
    },
  },
  mounted() {
    
    this.getWaterfallInfo('init')// 获取值得买瀑布流的数据
      
    this.getShuffliFigure()//获取轮播的数据
  },
}
</script>

<style scoped lang='less'>
//总容器
.totalContainer {
  background-color: #eee;
  width: 375px;
  min-height: 667px;
  // position: relative;
  // top: 46px;
  width: 100%;
  // 头部导航栏
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem 0 0.32rem;
    height: 1.5rem;
    background-color: #fafafa;
  }
  .row img {
    width: 2rem;
  }
  .van-icon {
    font-size: 0.8rem;
    color: #333;
  }
  .pay_z {
    font-size: 0.5rem;
    color: #000;
  }
  // 中间容器
  .middleContainer{
    width: 375px;
    position: relative;
    // 整个标题区
    .m-text {
      position: relative;
      width: 375px;
      height: 259px;
      background-image: url("http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView");
      // 图片标题
      img {
        width: 64px;
        height: 34.5px;
        position: absolute;
        top: 30px;
        left: 6px;
      }
      // 文字
      .text1 {
        font-size: 16px;
        position: absolute;
        left: 75px;
        top: 40px;
        color: #fff;
      }
    }
    // @轮播图区域
    .m-swipe {
      position: absolute;
      width: 350px;
      height: 270px;
      background: #fff;
      border-radius: 8px;
      top: 70px;
      left: 10px;

      // 轮播图每一条
      .van-swipe-item {
        font-size: 20px;
        text-align: center;
        padding-top: 10px;

        // 每一屏里的每个小块
        .itmelist {
          display: inline-block;
          position: relative;
          width: 84px;
          height: 100.5px;
          margin-top: 10px;

          img {
            width: 60px;
            height: 60px;
          }
          .text1 {
            font-weight: 700;
            font-size: 14px;
            width: 84px;
            height: 20px;
            white-space: nowrap;
            overflow: hidden;
            color: #333;
            text-align: center;
            line-height: 20px;
          }
          .text2 {
            width: 84px;
            margin-top: 1px;
            font-size: 10px;
            color: #999;
            text-align: center;
            height: 15px;
            line-height: 15px;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
  }

  //瀑布流
  .waterfallflowContainer {
    position: relative;
    top: 0.5px;
    width: 100%;
    // 瀑布
    .waterfallContainer {
      border-radius: 8px;
      width: 355px;
      margin: 100px 10px 0 10px;

      flex-wrap: wrap;

      .cell-item {
        // 图片
        img {
          width: 172px;
          border-radius: 5px;
        }
        // 文字部分
        .t-text{
          margin: 0 5px;
          // 标题
          .title {
            padding: 0 5px;
            font-size: 14px;
            color: #333;
            width: 160px;
            overflow: hidden;
            /* 设置webkit-盒子模型 */
            display: -webkit-box;
            /* 设置纵向对齐方式 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
          }
          // 下部内容
          .content {
            height: 24px;
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
            vertical-align: top;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            // 左边区域
            .start {
              width: 127px;
              // 头像
              .avatar {
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                border-radius: 12px;
                margin-right: 5px;
              }
              // 名字
              .name {
                font-size: 12px;
                vertical-align: 8px;
                line-height: 10px;
                color: #7e7d7d;
                overflow: hidden;
              }
            }
            //右边
            .icon {
              max-width: 50px;
              float: right;
              vertical-align: text-top;
              //人数
              .sum {
                display: inline-block;
                font-size: 12px;
                max-width: 45px;
                text-align: right;
                vertical-align: text-top;
                height: 16px;
                line-height: 16px;
                color: #7e7d7d;
              }
            }
          }
        }
      }
    }
  }
}
</style>